<template>
  <div class='infomationCheck'>
    <div slot="footer" class="dialog-footer clearfix">
      <div style="float: left; line-height: 32px;padding-left: 12px;">
        出院评估
        <span style='color: #999;font-size:12px;'>
          出院前进行评估是否可以正常出院
        </span>
      </div>
        <div style="float: right;">
            <el-button type="primary" @click="submitForm(0)">暂存</el-button>
            <el-button type="success" @click="submitForm(1)">确认提交</el-button>
            <el-button type="info" @click="cancel">取 消</el-button>
        </div>
    </div>
    <div class="scrollWrap" ref ='scrollWrap'>
      <div class="appointmentInfoBox">
          <div class="box">
              <hospitalAssessment-info :appointment = 'hospitalAssessmentInfo'></hospitalAssessment-info>
          </div>
      </div>

      <div class="pathBox margin20" >
          <div class="box">
              <h3>手术路径</h3>
              <surgery-path :appointment = 'appointment'></surgery-path>
          </div>
      </div>

      <div class=" margin20" >
          <div class="box">
              <h3>
                出院评估单
              </h3>
              <evaluation-form ref="evaluationForm" :radioGroup = 'radioGroup'></evaluation-form>
          </div>
      </div>
    </div>

  </div>
</template>

<script>
import hospitalAssessmentInfo from '@/yimiviews/components/hospitalAssessmentInfo'
import surgeryPath from '@/yimiviews/components/path'
import evaluationForm from '@/yimiviews/components/evaluationForm'
import { preoperativeConfirmation, addAssessment, getAssessmentDetail, updateAssessment } from '@/api/patientManage/patientManage'
export default {
  components: { hospitalAssessmentInfo, surgeryPath, evaluationForm },
  data() {
    return {
      radio1: '',
      radio2: '',
      radio3: '',
      radio4: '',
      radio5: '',
      appointmentStatus: '',
      assessMentId: '',
      hospitalAssessmentInfo: {},
      appointment: {},
      radioGroup: {}
    }
  },
  computed: {
    radio6() {
      return this.radio1 + this.radio2 + this.radio3 + this.radio4 + this.radio5 < 8 ? 1 : 2
    }
  },
  methods: {
    getAppointmentInfo() {
      const id = this.$route.params.id
      var data = {}
      data.id = id
      preoperativeConfirmation(data).then((res) => {
        this.hospitalAssessmentInfo = res.data.data
        if (this.hospitalAssessmentInfo.appointmentStatus === '出院评估') {
          getAssessmentDetail(data).then((res) => {
            this.radioGroup = JSON.parse(res.data.data.result)
            this.$refs.evaluationForm.radioGroup = JSON.parse(res.data.data.result)
            this.$refs.evaluationForm.radio6 = res.data.data.isPass + 1
            // console.log(res.data.data.isPass + 1)
            this.assessMentId = res.data.data.id
          })
        }
        this.appointmentStatus = this.hospitalAssessmentInfo.appointmentStatus
        this.appointment = res.data.data
        // console.log(this.appointmentInfo)
      })
    },
    submitForm(type) {
      const radioGroup = this.$refs.evaluationForm.radioGroup
      var data = {}
      data.appointId = this.$route.params.id
      data.id = this.$route.params.id
      data.result = JSON.stringify(radioGroup)
      data.mark = radioGroup.radio1 + radioGroup.radio2 + radioGroup.radio3 + radioGroup.radio4 + radioGroup.radio5
      data.pass = radioGroup.radio6 - 1
      if (this.appointmentStatus !== '出院评估') {
        addAssessment(data).then((res) => {
          if (res.data.data) {
            this.$router.push('/patientManage/hospitalAssessment')
          }
        })
      } else {
        // 更新评估结果
        data.id = this.assessMentId
        updateAssessment(data).then((res) => {
          console.log(res.data)
          if (res.data.data) {
            this.$router.push('/patientManage/hospitalAssessment')
          }
        })
      }
    },
    cancel() {
      this.$root.closeTag()
    },
    setAppMainHeight() {
      const bodyHeight = document.body.offsetHeight
      const appMainHeight = bodyHeight - 180
      this.$refs.scrollWrap.style.height = appMainHeight + 'px'
    }
  },
  mounted() {
    this.radio1 = 2
    this.radio2 = 0
    this.radio3 = 1
    this.radio4 = 2
    this.radio5 = 0
    this.getAppointmentInfo()
    this.setAppMainHeight()
  }
}
</script>
<style lang="scss">
.infomationCheck{
  padding-bottom: 20px;
  background-color: #f0f2f5;
  .margin20{
      margin: 20px;
      background-color: #fff;
  }
  .box{
      padding: 20px;
  }
  .dialog-footer {
      padding: 10px;
      background-color: #fff;
      margin-bottom: 20px;
  }
  .scrollWrap{
      min-height: 100%;
      overflow: auto;
    }
  .appointmentInfoBox{
      background-color: #fff;
      padding: 0 20px;
  }
  table{
    width: 100%;
    text-align: center;
    thead{
      background: #f0f2f5;
    }
    td{
      height: 36px;
      &>input{
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
      }
    }
  }
}
</style>
